<template>
  <view class="m-home" :style="[pageStyle]">
    <x-navigation-bar id="x-navigation-bar" :title="title" :storeId="storeId"/>
    <x-pop-box v-if="isLoad" :boxId="query.pageId" :storeId="storeId" :triggerType="triggerType" :query="query" />
    <h-pages-module
      v-if="componentList"
      ref="h-pages-module"
      :query="query"
      :title="title"
      :isLoaded="isLoad"
      :componentList="componentList"
      :storeId="storeId"
      :pageStatus="pageStatus"
      :source="query.source !== 'undefined' ? query.source : 'decorate'"
      :groupsSource="query.groupsSource !== 'undefined' ? query.source : ''"
      :navigationHeight="navigationHeight"
    />
    <view class="customer-service">
      <view class="btn" style="margin-top: 12px;">
        <x-button size="none" styles="background: none;padding: 0" @click="scrollTop">
          <view class="slot">
            <x-icon name="icon-036" size="34" color="#ED6A0C"/>
            <text class="_text">置顶</text>
          </view>
        </x-button>
      </view>
    </view>

    <!--页面错误提示-->
    <p-deleted-box v-if="isDeleted" :msg="'抱歉，该页面跑丢了！'" class="p-deleted-box"/>

    <!--优惠浮层-->
    <x-fixed-discount
      v-if="visibleFixedDiscount"
      :page-id="query.pageId"
      :visible.sync="visibleFixedDiscount"
      :primary-page-id="query.primaryPageId"
    />
  </view>
</template>

<script>
import $config from '@/config';
import XButton from '@/components/x-button';
import XIcon from '@/components/x-icon';
import HPagesModule from '@/components/h-pages-module';
import XNavigationBar from '@/components/x-navigation-bar';
import XPopBox from '@/components/x-pop-box';
import XFixedDiscount from '@/components/x-fixed-discount';
import PDeletedBox from '../advertising/components/p-deleted-box';

export default {
  name: 'Decorate',
  components: {
    XPopBox,
    XNavigationBar,
    HPagesModule,
    XIcon,
    XButton,
    XFixedDiscount,
    PDeletedBox
  },
  props: {},
  data() {
    return {
      isSaas: $config.project === 'saas',
      triggerType: null,
      isDeleted: false,
      title: null,
      query: {},
      isLoad: false,
      navigationHeight: 0,
      componentList: null,
      storeId: null,
      pageStyle: {},
      pageStatus: null,
      // 是否显示悬浮优惠
      visibleFixedDiscount: false
    };
  },
  computed: {},
  watch: {},
  onLoad(query) {
    this.query = query;
    if (this.query.scene) { //  从小程序码进入
      const scene = this.$tools.param2Object(this.query.scene);
      this.query.id = scene.id;
      delete this.query.scene;
    }
    this.visibleFixedDiscount = ['1024'].includes(query.source);
    this.getModule();
  },
  onShow() {
    // 再次返回页面的时候，更新缓存中的数据
    this.$XTrack('onLoad', this.query);
    this.$store.dispatch('pages/setData', {
      previousStatus: 6
    });
  },
  // 下拉刷新
  async onPullDownRefresh() {
    await this.getModule();
    this.$refs['h-pages-module'].handleRefresh();
  },
  // 页面触底加载数据
  onReachBottom() {
    if (this.$refs['h-pages-module']) {
      this.$refs['h-pages-module'].handleReachBottom();
    }
  },
  // 分享转发
  onShareAppMessage() {
    this.$XTrack('onShareAppMessage');
    return {
      title: this.title
    };
  },
  mounted() {
    // 计算标题栏高度
    this.getNavigation();
  },
  methods: {
    // 获取navigation信息
    getNavigation() {
      const query = uni.createSelectorQuery();
      query.select('#x-navigation-bar').boundingClientRect(data => {
        this.navigationHeight = data ? data.height : 0;
      }).exec();
    },
    // 回到顶部
    scrollTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    getModule() {
      const id = this.query.id || this.query.pageId;
      this.$http({
        login: true,
        isCancelToken: true,
        url: this.isSaas ? '/product/store/page/app/detail' : '/product/home/page/app/detail',
        data: {
          pageId: id
        },
        report: true
      }).then(res => {
        if (res.data.pageType === 0) {
          this.isDeleted = true;
        }
        res.data.componentList?.forEach((item) => {
          item.componentStyle = JSON.parse(item.componentStyle);
          item.componentContentList?.forEach((it) => {
            it.contentStyle = JSON.parse(it.contentStyle);
          });
        });
        const orderComponent = res.data.componentList.find((item) => { return item.type === 5; });
        if (orderComponent && orderComponent.templateType === 15) {
          const orderIndex = res.data.componentList.findIndex((item) => { return item.type === 5; });
          res.data.componentList.splice(orderIndex, 1);
          res.data.componentList.unshift(orderComponent);
        }
        const waterfallIndex = res.data.componentList.findIndex(this.objFn);
        res.data.componentList.push(res.data.componentList[waterfallIndex]);
        res.data.componentList.splice(waterfallIndex, 1);
        this.componentList = res.data.componentList;
        this.pageStyle = JSON.parse(res.data.pageStyle);
        this.title = res.data.title;
        this.storeId = res.data.storeId;
        this.pageStatus = res.data.pageStatus;
        /**
        triggerType	是
        *触发页面；1-商城首页；2-店铺首页；3-交易完成页；4-商城微页面；5-店铺微页面；6-店铺聚合页
        */
        if (res.data.type === 2) {
          this.triggerType = 5;
        }
        if (res.data.type === 3) {
          this.triggerType = 6;
        }
        if (res.data.type === 4) {
          this.triggerType = 4;
        }
        if (this.storeId && this.pageStatus === 1 && res.data.type !== 4) {
          this.triggerType = 2;
        }
        setTimeout(() => {
          this.isLoad = true;
        }, 200);

        uni.stopPullDownRefresh();
        // 增加数据埋点
        this.$XTrack('push', {
          customerId: res.data.storeId
        });
      }).catch(() => {
        this.isDeleted = true;
      });
    },
    objFn(obj) {
      return obj.type === 7;
    }
  }
};
</script>

<style lang="scss">
.m-home{
  width: 100%;
  position: relative;
  .p-deleted-box{
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    background: #FFFFFF;
  }
}
.customer-service{
  position: fixed;
  right: 40px;
  //bottom: 10%;
  bottom: 60px;
  .btn{
    width: 96px;
    height: 96px;
    background: #FFFFFF;
    border-radius: 96px;
    box-shadow: 0px -2px 4px rgba(216, 216, 216, 0.2), 0px 4px 4px rgba(216, 216, 216, 0.25);
    .slot{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 96px;
      height: 96px;
      ._text{
        font-size: 24px;
        line-height: 24px;
        color: $uni-color-secondary;
      }
    }
  }
}
</style>
